<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
 <title>角色展示</title>
 
<link rel="shortcut icon" href="favicon.ico">
<link href="hmp/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="hmp/css/style.css?v=4.1.0" rel="stylesheet">
<link href="hmp/css/animate.css" rel="stylesheet">
<link href="hmp/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="hmp/layui/layui/css/layui.css" rel="stylesheet">
<link href="hmp/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<!-- ztree菜单样式 -->
<link rel="stylesheet" href="hmp/js/zTree_v3-master/css/zTreeStyle/zTreeStyle-01.css" type="text/css">
 
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="col-sm-12">
			<div class="ibox">
				<div class="ibox-body">
					<div id="exampleToolbar" role="group" class="t-bar">
						<button  type="button"
							class="btn btn-primary" title="在根节点下添加角色" onclick="add('1')">
							<i class="fa fa-plus" aria-hidden="true"></i>添加角色
						</button>
					</div>
					<br>
					<table id="roleTreeTable" data-mobile-responsive="true">
					</table>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 展示权限 -->
	<div class="wrapper wrapper-content animated fadeInRight" id="qXDlg" style="display: none;">
		<div class="row">
			<div class="col-sm-12">
			<input id="roleId" name="roleId" class="hidden">
					   <ul id="treeQx" class="ztree"></ul>
					 <button  type="button"
							class="btn btn-primary" title="添加授权" onclick="onCheck()">
							<i class="fa fa-plus" aria-hidden="true"></i>添加授权
					</button>  
			</div>
		</div>
	</div>
</body>


<!-- 全局js -->
<script src="hmp/js/jquery.min.js"></script>
<script   src="hmp/js/bootstrap.min.js" ></script>
<!-- 自定义js -->
<script src="hmp/js/content.js?v=1.0.0"></script>
<script src="hmp/layui/layui/layui.js"></script>
<script src="hmp/js/plugins/jqTreeGrid/jquery.treegrid.min.js"></script>
<script src="hmp/js/plugins/jqTreeGrid/jquery.treegrid.bootstrap3.js"></script>
<script src="hmp/js/plugins/jqTreeGrid/jquery.treegrid.extension.js"></script>	 

<!-- ztree  用到的js  -->
<script type="text/javascript" src="hmp/js/zTree_v3-master/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="hmp/js/zTree_v3-master/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="hmp/js/zTree_v3-master/js/jquery.ztree.exedit.js"></script>

<script type="text/javascript">
 	 	//文档加载完成执行
	 $(document).ready(function () {
	    load();
	 });
 	 //我这里判断的跟节点为1  修改了 extension.js 源码  源码 是0 开始的 
	 var load = function () {
		 	//初始化 bootstrap 的树形  表格 
		  $('#roleTreeTable').bootstrapTreeTable({
	        	
	        	 id: 'id',  //菜单id 
	        	 code: 'id', 
	        	 parentCode: 'pid',
	        	 type: "GET", // 请求数据的ajax类型
	        	 url:"/role/list",
	        	 ajaxParams: {}, // 请求数据的ajax的data属性
	        	 expandColumn:'1',// 在哪一列上面显示展开按钮
	        	 striped: true, // 是否各行渐变色
	             bordered: true, // 是否显示边框
	             expandAll: false, // 是否全部展开
	          	// toolbar : '#exampleToolbar',
	          	 expanderExpandedClass : 'glyphicon glyphicon-chevron-down',// 展开的按钮的图标
       		    expanderCollapsedClass : 'glyphicon glyphicon-chevron-right',// 缩起的按钮的图标

	          	  columns: [
                    {
                        title: '编号',
                        field: 'id',
                        visible: false,
                        align: 'center',
                        valign: 'center',
                        width: '5%'
                    },
                    {
                        title: '角色名称',
                        valign: 'center',
                        field: 'name',
                        width: '20%'
                    },
                    {
                        title: '状态',
                        field: 'state',
                        align: 'center',
                        valign: 'center',
                        width : '10%',
                        formatter: function (item, index) {
                            if (item.state === 0) {
                                return '<span class="label label-warning">停用</span>';
                            }
                            if (item.state ===1) {
                                return '<span class="label label-success">正常</span>';
                            }
                        }
                    }, 
                    {
                        title: '备注',
                        valign: 'center',
                        width : '20%',
                        field: 'remarks'
                    },
                    {
                        title: '操作',
                        field: 'ids',
                        align: 'center',
                        valign: 'center',
                        formatter: function (item, index) {
                            var e = '<a class="btn btn-primary btn-sm " href="#" mce_href="#" title="编辑" onclick="edit(\''
                                + item.id
                                + '\')"><i class="fa fa-edit"></i></a> ';
                            var p = '<a class="btn btn-primary btn-sm " href="#" mce_href="#" title="添加角色" onclick="add(\''
                                + item.id
                                + '\')"><i class="fa fa-plus"></i></a> ';
                            var d = '<a class="btn btn-warning btn-sm  " href="#" title="停用"  mce_href="#" onclick="remove(\''
                                + item.id
                                + '\')"><i class="fa fa-remove"></i></a> ';
                            var f ='<a  class="btn btn-success btn-sm  " href="#" title="授权"  mce_href="#" onclick="qxDlg( '+ item.id +')"><i class="fa  fa-key"></i></a> ';
                            return e  + p + f + d;
                        }
                    }]
	        });
	 }
 
 	 //刷新 菜单 
 	 function  reLoad()
 	 {
 		  load();
 	 }
 </script>


<script type="text/javascript">

layui.use('layer', function(){
	  		layer=layui.layer;
	});

	function edit(id)
	{
		 layer.open({
		        type: 2,
		        title: '菜单修改',
		        maxmin: true,
		        shadeClose: false, // 点击遮罩关闭层
		        area: ['800px', '520px'],
		        content: '/role/edit/' + id  // iframe的url
		    });
		
	}
	
	function add(pid) {
	    layer.open({
	        type: 2,
	        title: '增加主角色',
	        maxmin: true,
	        shadeClose: false, // 点击遮罩关闭层
	        area: ['800px', '520px'],
	        content: '/role/add/' + pid  // iframe的url
	    });
	}
	
	
	function  remove(roleId)
	{
		 layer.confirm('确定要删除选中的记录？', {
		        btn: ['确定', '取消']
		    }, function () {
		        $.ajax({
		            url: "/role/remove",
		            type: "post",
		            data: {
		                'roleId': roleId
		            },
		            success: function (data) {
		                if (data.code == 200) {
		                    layer.msg(data.msg);
		                	layer.closeAll('page');
		                    reLoad();
		                } else {
		                    layer.msg(data.msg);
		                }
		            }
		        });
		    })
	}
	
 
	//打开权限 窗 
	function qxDlg(roleId)
	{
		
		$("#roleId").val(roleId); 
		
		var zNodes=new Array(); //节点数据 
		 
			$.ajax({
				type:'get',
				url:'/role/qXShow/'+roleId,
				async : false,
				error : function(request) {
				 	laryer.alert("网络错误!");
				},
				success : function(data) {
					zNodes=data.data;
					console.log(zNodes);
				}
			});
			
		
		   $.fn.zTree.init($("#treeQx"), setting, zNodes);
			 layer.open({
			  	 type: 1,
			  	 title: ['授权', 'font-size:18px;'],
                shadeClose: true,
                area: ['350px', '400px'],
                offset: ['70px', '350px'],
                content: $("#qXDlg")
			});
		 
	}

</script> 
 
 <SCRIPT type="text/javascript">
      
        var setting = {
            view: {
                selectedMulti: false
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            edit: {
               // enable: true
            },callback: {
				              //    onCheck:onCheck,
				//onClick: onClick
			}
        };
 
		function onCheck(){
			
			var roleId=$("#roleId").val();
            var treeObj=$.fn.zTree.getZTreeObj("treeQx"),
            nodes=treeObj.getCheckedNodes(true),
            menuArrIds=[];
            for(var i=0;i<nodes.length;i++){
            	menuArrIds.push(nodes[i].id);
            }
            var menuIds=menuArrIds.join(",");
            
            $.post("/role/saveMenuRole",{menuIds:menuIds,roleId:roleId},function(result){
    			if(result.msg){
    				 layer.alert(result.msg);
    			}else{
    				 layer.alert("提交失败，请联系管理员");
    				 
    			}
    			layer.closeAll('page');
    		},"json");
            
       }
		
    </SCRIPT>
 
</html>